import React, { Component } from 'react'

export default class App extends Component {
  state = {
    age: 18,
  }
  handleClick = () => {
    // 第一个参数也可以是一个回调函数，回调函数返回一个对象，对象里面表示要设置的数据
    this.setState(() => ({
      age: this.state.age + 1,
    }))
    // prevState: 表示上一次更新完毕后的 state
    this.setState((prevState) => ({
      age: prevState.age + 2,
    }))
    this.setState((prevState) => ({
      age: prevState.age + 1,
    }))
    // !上面的写法确实可以累计，把累计的结果渲染到页面上面，但是不不能改变 setState 异步更新的表现形式
    console.log(this.state.age) // 18
  }
  render() {
    return (
      <div>
        <p>{this.state.age}</p>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}
